<script setup lang="ts">
import { ref, watch, watchEffect } from 'vue'

// 基础侦听示例
const message = ref('Hello')
watch(message, (newValue, oldValue) => {
  console.log('message changed:', oldValue, '=>', newValue)
})

// 侦听多个来源
const firstName = ref('张')
const lastName = ref('三')
watch([firstName, lastName], ([newFirst, newLast], [oldFirst, oldLast]) => {
  console.log(`name changed: ${oldFirst} ${oldLast} => ${newFirst} ${newLast}`)
})

// 深度侦听
const user = ref({
  name: '张三',
  age: 25,
  address: {
    city: '北京'
  }
})

watch(user, (newValue, oldValue) => {
  console.log('user changed:', oldValue, '=>', newValue)
}, { deep: true })

// 即时回调的侦听器
const count = ref(0)
watch(count, (newValue, oldValue) => {
  console.log('count changed:', oldValue, '=>', newValue)
}, { immediate: true })

// watchEffect 示例
const searchQuery = ref('')
const searchResults = ref<string[]>([])
const isLoading = ref(false)

// 模拟API调用
const searchApi = async (query: string) => {
  return new Promise<string[]>((resolve) => {
    setTimeout(() => {
      resolve([`结果1 for ${query}`, `结果2 for ${query}`, `结果3 for ${query}`])
    }, 1000)
  })
}

// 使用 watchEffect 自动执行搜索
watchEffect(async () => {
  if (searchQuery.value.length === 0) {
    searchResults.value = []
    return
  }
  
  isLoading.value = true
  try {
    searchResults.value = await searchApi(searchQuery.value)
  } finally {
    isLoading.value = false
  }
})

// 停止侦听示例
const timer = ref(0)
const stop = watch(timer, (newValue) => {
  console.log('timer changed:', newValue)
})

// 5秒后停止侦听
setTimeout(() => {
  stop()
  console.log('停止侦听 timer')
}, 5000)

// 每秒更新 timer
setInterval(() => {
  timer.value++
}, 1000)
</script>

<template>
  <div class="watch-demo">
    <h2>侦听器示例</h2>

    <section>
      <h3>1. 基础侦听</h3>
      <input v-model="message" placeholder="修改消息">
      <p>消息: {{ message }}</p>
      <p class="tip">打开控制台查看侦听器输出</p>
    </section>

    <section>
      <h3>2. 侦听多个来源</h3>
      <div>
        <input v-model="firstName" placeholder="姓">
        <input v-model="lastName" placeholder="名">
        <p>姓名: {{ firstName }} {{ lastName }}</p>
      </div>
    </section>

    <section>
      <h3>3. 深度侦听</h3>
      <div>
        <input v-model="user.name" placeholder="姓名">
        <input v-model.number="user.age" type="number" placeholder="年龄">
        <input v-model="user.address.city" placeholder="城市">
        <p>用户信息: {{ user }}</p>
      </div>
    </section>

    <section>
      <h3>4. watchEffect 搜索示例</h3>
      <div>
        <input 
          v-model="searchQuery" 
          placeholder="输入搜索内容"
          :disabled="isLoading"
        >
        <p v-if="isLoading">搜索中...</p>
        <ul v-else>
          <li v-for="(result, index) in searchResults" :key="index">
            {{ result }}
          </li>
        </ul>
      </div>
    </section>

    <section>
      <h3>5. 停止侦听示例</h3>
      <p>Timer: {{ timer }}</p>
      <p class="tip">5秒后将停止侦听 timer 的变化</p>
    </section>
  </div>
</template>

<style scoped>
.watch-demo {
  padding: 20px;
}

section {
  margin: 20px 0;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

input {
  margin: 5px;
  padding: 5px;
}

.tip {
  color: #666;
  font-size: 0.9em;
  font-style: italic;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  padding: 5px 0;
}
</style> 